import { CircleComponet, PathComponent, PolygonComponent, RectComponent, SvgComponent } from '../type'

const renderCircleConfig = (model: CircleComponet) => {
  return (<>
    <a-form-item label="半径">
      <a-input-number v-model={[ model.r, 'value' ]} />
    </a-form-item>
    <a-form-item label="X偏移">
      <a-input-number v-model={[ model.cx, 'value' ]} />
    </a-form-item>
    <a-form-item label="Y偏移">
      <a-input-number v-model={[ model.cy, 'value' ]} />
    </a-form-item>
  </>)
}

const renderRectConfig = (model: RectComponent) => {
  return (<>
    <a-form-item label="宽度">
      <a-input-number v-model={[ model.width, 'value' ]} min={ 0 } />
    </a-form-item>
    <a-form-item label="高度">
      <a-input-number v-model={[ model.height, 'value' ]} min={ 0 } />
    </a-form-item>
    <a-form-item label="X偏移">
      <a-input-number v-model={[ model.x, 'value' ]} />
    </a-form-item>
    <a-form-item label="Y偏移">
      <a-input-number v-model={[ model.y, 'value' ]} />
    </a-form-item>
  </>)
}

const renderPolygonConfig = (model: PolygonComponent) => {
  return (<>
    <a-form-item label="顶点">
      <a-input v-model={[ model.points, 'value' ]} />
    </a-form-item>
  </>)
}

const renderPathConfig = (model: PathComponent) => {
  return (<>
    <a-form-item label="路径">
      <a-input v-model={[ model.d, 'value' ]} />
    </a-form-item>
  </>)
}

const renderMap = {
  circle: renderCircleConfig,
  rect: renderRectConfig,
  polygon: renderPolygonConfig,
  path: renderPathConfig
}

export default function renderFormItem (model: SvgComponent) {
  const handler = renderMap[model.type]
  return handler(model as any)
}
